<route lang="json5">
{
  style: {
    navigationBarTitleText: '日志查看',
  },
}
</route>

<template>
  <view class="daily">
    <wd-drop-menu>
      <wd-drop-menu-item
        v-show="townState.options.length > 0"
        v-model="townState.value"
        :options="townState.options"
        value-key="orgCode"
        label-key="title"
      />
    </wd-drop-menu>
    <scroll-view
      scroll-y
      class="scroll-view flex-1"
      refresher-enabled
      enable-back-to-top
      :refresher-triggered="refresherTriggered"
      @refresherrefresh="onRefresherrefresh"
      @scrolltolower="getDataList"
    >
      <view class="common-container">
        <template v-if="dataList.length">
          <view
            v-for="item in dataList"
            :key="item.id"
            class="data-item"
            @click="uniNavigateTo(`/pages-sub/daily/detail/index?id=${item.id}`)"
          >
            <view class="data-item-header">
              <view class="data-item-type">【{{ item.type_dictText }}】</view>
              <view class="data-item-time">{{ item.userId_dictText }} | {{ item.dateCode }}</view>
            </view>
            <view class="data-item-content">
              <view class="data-item-desc">
                <text class="title">本{{ typeMap[item.type] }}工作情况：</text>
                {{ item.workLog }}
              </view>
              <view class="data-item-desc">
                <text class="title">
                  {{ item.type === 'day' ? '明' : '下' }}{{ typeMap[item.type] }}工作计划：
                </text>
                {{ item.nextWorkLog }}
              </view>
            </view>
          </view>
        </template>
        <template v-else>
          <wd-status-tip image="content" tip="暂无内容" />
        </template>
      </view>
      <wd-loadmore
        v-if="dataList.length"
        finished-text="没有更多了"
        :state="loadState"
        @reload="getDataList"
      />
    </scroll-view>
  </view>
</template>

<script setup>
import WorkApi from '@/service/work'
import HallApi from '@/service/hall'
import { LH_DEPART_CODE } from '@/configs/constant'
import { uniNavigateTo } from '@/utils'

/** 顶部筛选项 start */
const townState = reactive({
  value: 'all', // 默认为全部
  options: [],
})
const getLhDepartTree = async () => {
  const params = {
    pid: LH_DEPART_CODE,
    primaryKey: 'orgCode',
  }
  const { code, result } = await HallApi.getDepartTree(params)
  if (result?.length > 0) {
    townState.value = 'all'
    townState.options = [{ title: '全部', orgCode: 'all' }, ...result]
  } else {
    townState.options = []
  }
}
getLhDepartTree()
/** 顶部筛选项 end */

const typeMap = {
  day: '日',
  week: '周',
  month: '月',
}

const loadState = ref('loading')
const pageObj = ref({
  pageNo: 1,
  pageSize: 10,
})
const dataList = ref([])

const getDataList = async () => {
  if (loadState.value === 'finished') return
  try {
    const params = {
      ...pageObj.value,
      order: 'desc',
      column: 'createTime',
      orgCode: townState.value === 'all' ? '' : townState.value,
    }
    const { code, result } = await WorkApi.getWorkLogList(params)
    if (code === 200 && result) {
      const { records, pages } = result
      if (records?.length) {
        dataList.value = [...dataList.value, ...records]
      }
      if (pageObj.value.pageNo < pages) {
        pageObj.value.pageNo++
      } else {
        loadState.value = 'finished'
      }
    } else {
      loadState.value = 'error'
    }
  } catch (e) {
    loadState.value = 'error'
  }
}

const reset = () => {
  pageObj.value.pageNo = 1
  dataList.value = []
  loadState.value = 'loading'
}

const refreshList = () => {
  reset()
  getDataList()
}

const refresherTriggered = ref(false)
const onRefresherrefresh = async () => {
  refresherTriggered.value = true
  // 重置分页数据，刷新接口
  reset()
  await getDataList()
  refresherTriggered.value = false
}

watch(
  () => townState.value,
  () => {
    reset()
    getDataList()
  },
)

onLoad(() => {
  refreshList()
})

defineExpose({
  refreshList,
})
</script>

<style lang="scss" scoped>
.daily {
  :deep() .wd-drop-menu {
    box-shadow: $uni-shadow-base;
  }
}

.scroll-view {
  width: 100%;
  height: calc(100vh - 46px);
}

.data-item {
  padding: $uni-spacing-col-lg $uni-spacing-row-lg;
  margin-bottom: $uni-spacing-col-lg;
  border-radius: $uni-border-radius-base;
  box-shadow: $uni-shadow-base;

  &-header {
    display: flex;
    align-items: center;
    padding-bottom: $uni-spacing-col-lg;
    margin-bottom: $uni-spacing-col-lg;
    font-weight: 600;
    border-bottom: 1px solid $uni-border-color;
  }

  &-type {
    color: $uni-color-primary;
  }

  &-desc {
    margin-bottom: $uni-spacing-col-base;
    font-size: $uni-font-size-base;
    color: $uni-text-color-grey;

    .title {
      font-weight: 600;
    }
  }
}
</style>
